import { View, Image, Text, ScrollView } from "@tarojs/components";
import PageContainer from "@/components/PageContainer";
import { DynamicColors, GStyleSheet } from "@/utils/DarkMode";
import { useMemo } from "react";
import { getAppInfo } from "@/config/template";
import { useLanguageStore } from "@/hooks";
import { miniProgramVersionNum, goLicense } from "@/utils";
import ListItem from "@/components/ListItem";
import i18n from "i18n-js";
import FlexScrollView from "@/components/FlexScrollView";


const data = [
  {
    text: '1. 点击小程序右上角的第一个图标。',
    image: 'https://xbgroup-static.gizwits.com/cybertron/users/391941/media/dingyue1_1704420265180.png',
  },
  {
    text: '2. 点击“设置”。',
    image: 'https://xbgroup-static.gizwits.com/cybertron/users/391941/media/dingyue2_1704420265197.png',
  },
  {
    text: '3. 在设置页面，点击通知管理。',
    image: 'https://xbgroup-static.gizwits.com/cybertron/users/391941/media/device_noti3@3x_1704444537234.png',
  },
  {
    text: '4. 开启接收通知的开关。',
    image: 'https://xbgroup-static.gizwits.com/cybertron/users/391941/media/device_noti4@3x_1704444537236.png',
  }
]
const AlarmPushTips = () => {
  const styles = dstyles.style

  return (
    <PageContainer title={i18n.t("开启订阅消息")}>
      <FlexScrollView id='experienceCenterList' scrollStyle={styles.scroll}>
        {
          data.map(item => {
            return <>
            <Text style={styles.text}>{item.text}</Text>
            <Image mode='widthFix' src={item.image} style={styles.image} />
            </>
          })
        }
      </FlexScrollView>
    </PageContainer>
  );
};

const dstyles = GStyleSheet.create({
  container: {},
  text: {
    display: 'block',
    width: '100%',
    textAlign: 'left',
    paddingLeft: '20PX',
    paddingTop: '20PX',
    paddingBottom: '20PX',
    fontSize: 16,
    color: '#1B1B1B'
  },
  image: {
    display: 'block',
    margin: 'auto'
  },
  scroll: {
    backgroundColor: '#F7F7F7'
  },
  icon: {
    marginTop: 20,
    width: "162rpx",
    height: "162rpx",
    borderRadius: 200,
    marginBottom: 10,
    boxShadow: "0 0 10px rgba(0,0,0,0.2)",
  },
  version: {
    marginTop: 10,
    fontSize: 14,
    color: DynamicColors.normalTextGaryColor,
  },
});

export default AlarmPushTips;
